<template>
  <view class="page-wrapper">
    <scroll-view 
      class="content-scroll-view" 
      scroll-y="true"
      :show-scrollbar="true"
      enhanced="true"
    >
      <view class="container">
        <view class="header">
          <text class="title">考试模式</text>
        </view>
        <view class="content">
          <text class="description">这是虚拟仿真教学实验的考试模式，在此模式下将记录您的成绩和答题情况。</text>
          <view class="button-group">
			  <button class="btn-start" @click="startExam">开始考试</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('考试模式页面已加载')
})

const startExam = () => {
  uni.showToast({
    title: '考试开始',
    icon: 'success'
  })
  uni.navigateTo({
  	url:"/pages/case/case"
  })
  // 考试模式逻辑
}
</script>

<style scoped lang="scss">
.page-wrapper {
  height: 100vh;
}

.content-scroll-view {
  height: 100%;
  background-color: #f5f5f5;
  overflow: scroll;
}

.container {
  min-height: 100%;
  padding: 30rpx;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.content {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .description {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 40rpx;
    line-height: 1.6;
  }
}

.button-group {
  display: flex;
  justify-content: center;
  
  .btn-start {
    width: 80%;
    margin-top: 40rpx;
    background-color: #4d79ce;
    color: #fff;
    font-size: 32rpx;
    padding: 20rpx 0;
    border-radius: 40rpx;
  }
}
</style> 